<template>
  <div>
    <div class="select">
      <div v-for="(item,key,index) in data" :key="index" v-if="data" @mouseenter="slide(item,true)" @mouseleave="slide(item,false)">
        <div class="option-title">
          <span>{{item[choiceIndex[index]].name}}</span>
          <span></span>
        </div>
        <ul :class="{'active':item.isShow}" class="scroll-wrap">
          <li v-for="(obj,i) in item" :key="i" @click="choice(obj,i,index,item)">
            <span>{{obj.name}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      curIndex: 0
    }
  },
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    choiceIndex: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    slide (item, isSlide) {
      // 数据层次太多，没有触发render函数进行自动更新，需手动调用
      this.$forceUpdate()
      this.$set(item, 'isShow', isSlide)
    },
    choice (obj, i, index, item) {
      this.choiceIndex.splice(index, 1, i)
      this.slide(item, false)
      this.$emit('choice', obj, index)
    }
  }
  // mounted () {
  //   document.addEventListener('click', (e) => {
  //     let event = e || window.e
  //     let comSelect = document.getElementsByClassName('option-title')
  //     let arrNode = []
  //     for (let i = 0; i < comSelect.length; i++) {
  //       arrNode.push(comSelect[i])
  //     }
  //     console.log(arrNode.indexOf(event.target) < 0)
  //     if (arrNode.indexOf(event.target) < 0) {
  //       for (let x in this.data) {
  //         this.data[x].isShow = false
  //       }
  //     }
  //   }, false)
  // }
}
</script>
<style scoped lang="scss">
.select {
  position: relative;
  display: flex;
  cursor: pointer;
  > div {
    margin-right: 15px;
  }
  .option-title {
    display: flex;
    align-items: center;
    width: 80px;
    justify-content: center;
    line-height: 32px;
    height: 32px;
    background-color: $positive;
    color: $light;
    border: 1px solid $positive;
    > span:last-child {
      // margin: 3px 0 0 10px;
      margin-left: 10px;
      margin-top: 2px;
      display: inline-block;
      border-right: 5px solid transparent;
      border-top: 6px solid $light;
      border-left: 5px solid transparent;
    }
  }
  ul {
    position: absolute;
    width: 80px;
    max-height: 0;
    z-index: 100;
    margin-top: 5px;
    box-shadow: 0 0 3px 0 rgba(75, 184, 238, 0.4);
    overflow-y: scroll;
    transition: all 0.3s;
    color: $positive;
    background-color: $light;
    &.active {
      max-height: 320px;
    }
  }
  li {
    // border-bottom: 1px solid $stable02;
    text-align: center;
    line-height: 32px;
    &:hover {
      background-color: rgba(75, 184, 238, 0.4);
      color: $light;
    }
  }
}
</style>
